<template>
    <div class="gate-box">
        <div class="gate-header">
            <div class="corner-left"></div>
            <div class="corner-right"></div>
        </div>
        <div class="gate" v-for="(gate, i) in props.gateList" :key="i">
            <div class="hole-box">
                <div class="hole" v-for="item in 2" :key="`hode${item}`"
                    :class="gate.isOpen ? 'hole-open' : 'hole-close'">
                </div>
            </div>
            <div @click="toggleGate(gate)" class="hole-body"
                :class="gate.isOpen ? 'hole-body-open' : 'hole-body-close'">
                <div class="hole-animate"></div>
                <div class="gate-name">{{ gate.name }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    gateList: {
        type: Array,
        default: [
            { id: 1, name: '1#闸', isOpen: false, group: 1 },
            { id: 2, name: '2#闸', isOpen: false, group: 2 },
            { id: 3, name: '3#闸', isOpen: false, group: 3 },
            { id: 4, name: '4#闸', isOpen: false, group: 4 },
            { id: 5, name: '5#闸', isOpen: false, group: 5 },
            { id: 6, name: '6#闸', isOpen: false, group: 6 },
            { id: 7, name: '7#闸', isOpen: false, group: 7 },
            { id: 8, name: '8#闸', isOpen: false, group: 6 },
            { id: 9, name: '9#闸', isOpen: false, group: 5 },
            { id: 10, name: '10#闸', isOpen: false, group: 4 },
            { id: 11, name: '11#闸', isOpen: false, group: 3 },
            { id: 12, name: '12#闸', isOpen: false, group: 2 },
            { id: 13, name: '13#闸', isOpen: false, group: 1 }
        ]
    }
})

const toggleGate = gate => {
    props.gateList.filter(g => g.group === gate.group).forEach(g => g.isOpen = !g.isOpen)
}

</script>

<style scoped lang="scss">
$header-color: rgb(123, 51, 12); // 头部颜色
$header-color: rgb(140, 85, 55); // 头部颜色
$border-color: rgb(140, 85, 55); // 闸边框颜色
$close-color: rgb(140, 85, 55); // 闸关闭颜色
$open-color: #8ecbff; // 闸开启颜色
$open-linear-gradient: linear-gradient(360deg, #FFFFFF, #dfefff, #bde2ff, #8ecbff, #6eb5ff, #6eb5ff, #8ecbff, #bde2ff, #dfefff);
$close-linear-gradient: linear-gradient(to bottom, rgb(43, 17, 4), rgb(123, 51, 12), rgb(140, 85, 55));

.gate-box {
    position: relative;
    background-color: white;
    width: 800px;
    height: 150px;

    border: 7px solid $border-color;
    border-top: 0px;
    border-bottom: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
    flex-wrap: wrap;

    .gate-header {
        position: absolute;
        top: -10px;
        left: -15px;
        width: calc(100% + 30px);
        border-radius: 50px 50px 0px 0px;
        height: 10px;
        background-color: $header-color;

        display: flex;
        justify-content: space-between;

        .corner-left {
            position: absolute;
            border-radius: 5px 5px 0px 0px;
            width: 3px;
            height: 10px;
            top: -3px;
            left: 5px;
            background-color: $header-color;
        }

        .corner-right {
            position: absolute;
            border-radius: 5px 5px 0px 0px;
            width: 3px;
            height: 10px;
            top: -3px;
            right: 5px;
            background-color: $header-color;
        }
    }

    .gate {
        width: calc(100% / 13);
        height: 100%;
        border: 7px solid $border-color;
        border-top: 0px;
        border-bottom: 0px;
        display: flex;
        flex-wrap: wrap;

        .hole-box {
            width: 100%;
            height: 50px;
            background-color: #F7F9FC;

            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            align-items: center;

            .hole {
                width: 30%;
                height: 20px;
                border-radius: 13px 13px 0px 0px;

            }

            .hole-open {
                background-color: $open-color;
            }

            .hole-close {
                background-color: $close-color;
            }
        }

        .hole-body {
            cursor: pointer;
            width: 100%;
            height: calc(100% - 50px);
            display: flex;
            flex-wrap: wrap;
            position: relative;

            .gate-name {
                width: 100%;
                align-self: flex-end;
                font-size: 13px;
                color: white;
                text-align: center;
                position: absolute;
                z-index: 1;
            }
        }

        .hole-body-open {
            background: $open-linear-gradient;
            background-size: 100% 200%;
            animation: waterFlow 3s linear infinite;

            .hole-animate {
                width: 100%;
                background: $close-linear-gradient;
                height: 0%;
                animation: opengate 3s ease 1;
            }
        }

        .hole-body-close {
            background: $close-linear-gradient;

            .hole-animate {
                width: 100%;
                height: 0%;
                background: $open-linear-gradient;
                animation: closegate 3s ease 1;
            }
        }

        @keyframes waterFlow {
            0% {
                background-position: 0% 100%;
            }

            50% {
                background-position: 100% 0%;
            }

            100% {
                background-position: 0% 0%;
            }
        }

        @keyframes opengate {
            0% {
                height: 100%;
            }

            100% {
                height: 0%;
            }
        }

        @keyframes closegate {
            0% {
                height: 100%;
            }

            100% {
                height: 0%;
            }
        }
    }
}
</style>